<template>
  <div class="rights">
    <el-row>
      <el-col :span="24">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>权限管理</el-breadcrumb-item>
          <el-breadcrumb-item>权限列表</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>

    <!-- authName : "商品管理"      id : 101     level : "0"     path : "goods"    pid : 0 -->

    <!-- 
    authName
: 
"商品管理"
id
: 
101
level
: 
"0"
path
: 
"goods"
pid
: 
0 -->
    <el-table
      v-loading="isLoading"
      :data="rightList"
      border
      style="width: 100%"
    >
      <!--  tyep index 额外添加序号 -->
      <el-table-column type="index"> </el-table-column>

      <el-table-column prop="authName" label="权限名称" width="180">
      </el-table-column>

      <el-table-column prop="id" label="id名称" width="180"> </el-table-column>
      <el-table-column prop="path" label="路径"> </el-table-column>
      <el-table-column label="层级">
        <template #default="scope">
          <!-- 第一种 v-if  -->
          <!-- 第二种 计算属性或者方法 -->

          <el-tag
            type="success"
            class="mx-1"
            effect="dark"
            size="large"
            v-if="scope.row.level == 1"
          >
            {{ scope.row.level }}级
          </el-tag>
          <el-tag
            class="mx-1"
            effect="dark"
            size="large"
            v-else-if="scope.row.level == 2"
          >
            {{ scope.row.level }} 级
          </el-tag>
          <el-tag type="danger" class="mx-1" effect="dark" size="large" v-else>
            {{ scope.row.level }} 级
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'

import { getRightList } from '@/api/rights'

const rightList = ref([])

const isLoading = ref(false)

const getRList = async () => {
  let res = await getRightList({ type: 'list' })

  console.log(res.data)
  rightList.value = res.data
}

onMounted(() => {
  getRList()
})
</script>

<style lang="scss" scoped></style>
